<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07.鼠标移入移出事件</title>
</head>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    #div {
        width: 500px;
        height: 500px;
        background-color: palevioletred;
        position: relative;
        overflow: hidden;
    }


</style>
<body>
<div id="div">

</div>
<script>
    var div = document.querySelector("#div");
    //添加锁
    var isDraw = false;
    div.onmousemove = function (e) {
        if (isDraw) {
            console.log(e);
            var pot = document.createElement("div");
            pot.style.width = 10 + "px";
            pot.style.height = 10 + "px";
            pot.style.backgroundColor = "blue";
            pot.style.borderRadius = "5px";
            //设置圆点位置
            var x = e.pageX;
            var y = e.pageY;
            pot.style.position = "absolute";
            pot.style.left = x - 5 + "px";
            pot.style.top = y - 5 + "px";
            div.appendChild(pot);
        }
    }
    div.onclick = function () {
        isDraw = true;
    }
    div.ondblclick = function () {
        isDraw = false;
    }
</script>
</body>
</html>